<template>
  <div class="update-main-box">
    <el-drawer
      :visible.sync="isDrawer"
      :direction="direction"
      :size="this.$store.state.user.userIsPhone ? '90%' : '30%'"
      :with-header="false"
    >
      <div class="drawer-title">
        <div class="drawer-title">附件详情</div>
        <div class="iconfont icon-guanbi" @click="isDrawer = false"></div>
      </div>
      <div class="head-box">
        <div class="identifier-box"></div>
        <div>项目信息</div>
      </div>
      <div class="info-box">
        <div class="left-box">
          <div>项目编号：</div>
          <div>项目简称：</div>
          <div>项目全称：</div>
          <div>所处阶段：</div>
          <div>所处城市：</div>
        </div>
        <div class="right-box">
          <div>&emsp;{{ proCode }}</div>
          <div><input type="text" v-model="proShortName" /></div>
          <div><input type="text" v-model="proName" /></div>
          <div>
            <el-select v-model="stage" placeholder="请选择阶段">
              <el-option
                v-for="item in stageOption"
                :key="item.proStage"
                :label="item.stageName"
                :value="item.proStage"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <el-cascader
              v-model="proCity"
              :options="cityList2"
              @change="handleChange"
            ></el-cascader>
          </div>
        </div>
      </div>
      <div class="head-box">
        <div class="identifier-box"></div>
        <div>成员信息</div>
      </div>
      <div class="personnel-box">
        <div class="left-box">
          <div>销售负责人：</div>
          <div>电气负责人：</div>
          <div>工程负责人：</div>
          <div>研发负责人：</div>
          <div>合同负责人：</div>
        </div>
        <div class="right-box">
          <div>
            <el-select filterable v-model="sale" placeholder="请选择销售负责人">
              <el-option
                v-for="(item, index) in perOptions"
                :key="index"
                :label="item.name"
                :value="item.empcode"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <el-select
              filterable
              v-model="electrical"
              placeholder="请选择电气负责人"
            >
              <el-option
                v-for="(item, index) in perOptions"
                :key="index"
                :label="item.name"
                :value="item.empcode"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <el-select
              filterable
              v-model="engineering"
              placeholder="请选择工程负责人"
            >
              <el-option
                v-for="(item, index) in perOptions"
                :key="index"
                :label="item.name"
                :value="item.empcode"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <el-select
              filterable
              v-model="research"
              placeholder="请选择研发负责人"
            >
              <el-option
                v-for="(item, index) in perOptions"
                :key="index"
                :label="item.name"
                :value="item.empcode"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <el-select
              filterable
              v-model="contract"
              placeholder="请选择合同负责人"
            >
              <el-option
                v-for="(item, index) in perOptions"
                :key="index"
                :label="item.name"
                :value="item.empcode"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="head-box" style="height: 0"></div>
      <div class="btn-box">
        <div class="remove-btn" @click="cancellation">取消</div>
        <div class="sub-btn" @click="submitUpdate">提交</div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  getProjectInfoApi,
  getProjectContractApi,
  getProjectTeamApi,
  getProjectMilestonesApi,
  getProjectDutyApi,
  getEmpolyeeListApi,
  updateProApi,
} from "@/api/index";

import cityList2 from "@/config/cityList2";

export default {
  props: {
    drawer: {
      type: Boolean,
      default: false,
    },
    projectRow: {
      type: Object,
      default: false,
    },
  },
  computed: {
    cityList2() {
      return cityList2;
    },
  },
  data() {
    return {
      // 当前项目信息
      row: "",
      // 是否弹出抽屉
      isDrawer: false,
      // 抽屉弹出方向
      direction: "rtl",
      proCode: "",
      proName: "",
      proShortName: "",
      // 城市列表
      cityFixList: [],
      // 选中的城市
      proCity: [],
      // 阶段源数据
      stageOption: [
        {
          proStage: "SalesResearch",
          stageName: "售前调研",
        },
        {
          proStage: "Develop",
          stageName: "研发阶段",
        },
        {
          proStage: "ElectricImplement",
          stageName: "电气实施",
        },
        {
          proStage: "Design",
          stageName: "产品设计",
        },
        {
          proStage: "DebugTogether",
          stageName: "联调阶段",
        },
        {
          proStage: "Waiting4Sign",
          stageName: "等待验收",
        },
        {
          proStage: "Finish",
          stageName: "已完成",
        },
      ],
      // 选择的阶段
      stage: "",
      // 选取的日期
      dayData: new Date(),
      // 展示的日期
      dayArr: [],
      // 项目信息
      projectData: {
        info: null,
        contract: null,
        team: null,
        dutyTeam: null,
        milestone: {
          SalesResearch: [],
          ElectricImplement: [],
          Design: [],
          Develop: [],
          DebugTogethe: [],
          Waiting4Sign: [],
          Finish: [],
        },
      },
      perOptions: [],
      // 销售负责人
      sale: "",
      // 电气负责人
      electrical: "",
      // 工程负责人
      engineering: "",
      // 研发负责人
      research: "",
      // 合同负责人
      contract: "",
      // 合同日期
      contractTime: "",
      // 合同金额
      contractAmount: "",
      // 已汇款
      paymentAmount: "",
      // 预计回款日期
      balanceTime: "",
    };
  },

  mounted() {
    this.initDay();
    this.getEmpolyeeList();
    // this.fixCityList();
  },

  methods: {
    // 清洗城市列表
    fixCityList() {
      for (let i = 0; i <= cityList.length; i++) {
        cityList[i]["value"] = cityList[i]["label"];
        if (cityList[i].children) {
          let children = cityList[i].children;
          for (let j = 0; j <= children.length; j++) {
            children[j]["value"] = children[j]["label"];
          }
        }
      }
    },

    openDrawer(row) {
      this.row = row;
      let data = {
        procode: row.procode,
      };
      // 基本信息
      this.getProjectInfo(data);
      // 合同信息
      this.getProjectContract(data);
      // 人员信息
      this.getPersonTeam(data);
      this.proName = row.proname;
      this.proShortName = row.proshortname;
      this.proCode = row.procode;
      this.stage = row.prostage;
      console.log("人员信息", row);
      this.isDrawer = true;
      this.proCity.push(row.procity.split("-")[0], row.procity.split("-")[1]);
    },

    async getEmpolyeeList() {
      let res = await getEmpolyeeListApi();
      res.forEach((item, index) => {
        res[index].name = item.empname;
      });
      this.perOptions = [...res];
    },

    // 获取当前项目的基本情况
    async getProjectInfo(data) {
      let infoRes = await getProjectInfoApi(data);
      let str = "";
      if (infoRes.length) {
        infoRes.forEach((item, index) => {
          let str1 = index === infoRes.length - 1 ? "" : "、";
          str = str + item.fuctionname + str1;
        });
      }
      this.projectData.info = str;
      console.log("选中项的基本数据---->", this.projectData);
    },

    // 获取人员信息
    async getPersonTeam(data) {
      let res = await getProjectTeamApi(data);
      this.engineering = res[0].projectmanager;
      this.electrical = res[0].electrical;
      this.sale = res[0].salescommerce;
      this.research = res[0].devleader;
      console.log(
        "人员信息----->",
        res,
        this.engineering,
        this.electrical,
        this.sale,
        this.research
      );
    },

    // 获取当前项目的合同信息
    async getProjectContract(data) {
      let contractRes = await getProjectContractApi(data);
      if (!contractRes.length) return;
      this.contract = contractRes[0].empname;
      console.log("选中项的合同数据---->", contractRes);
    },

    // 打开日期选择器
    openDayChoose() {
      this.$refs.dayChoose.handleClickIcon();
    },

    // 选择的日期变化
    dayDataChange(day) {
      let data = {
        procode: this.projectRow.procode,
      };
      this.dayArr = day.split("-");
      console.log("aaaaaaa----->", this.dayArr);
      this.getDutyTeam(data);
    },

    // 初始化当前日期
    initDay() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      if (year < 10) {
        year = "0" + year;
      }
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      this.dayArr = [year, month, day];
    },

    // 处理时间
    fixTime(str) {
      let arr = str.split("-");
      let str1 = arr[2].slice(0, 2);
      return arr[0] + "-" + arr[1] + "-" + str1;
    },

    // 选择城市
    handleChange(value) {},

    // 提交修改
    async submitUpdate() {
      let data = {
        procode: this.proCode,
        proname: this.proName,
        proshortname: this.proShortName,
        prostage: this.stage,
        proprovince: this.proCity[0],
        procity: this.proCity[1],
        proaddress: "",
        projectmanager: this.engineering,
        electrical: this.electrical,
        salescommerce: this.sale,
        devleader: this.research,
        empcode: this.$store.state.user.userCode,
      };
      console.log("提交修改---->", data);
      let res = await updateProApi(data);
      if (res === "更新项目信息成功") {
        this.$message.success("修改成功！！！");
        let data = {
          procode: this.proCode,
        };
        // 基本信息
        this.getProjectInfo(data);
        // 合同信息
        this.getProjectContract(data);
        // 人员信息
        this.getPersonTeam(data);
        // this.$router.go(0);
      }
    },

    // 取消修改
    cancellation() {
      let data = {
        procode: this.row.procode,
      };
      // 基本信息
      this.getProjectInfo(data);
      // 合同信息
      this.getProjectContract(data);
      // 人员信息
      this.getPersonTeam(data);
      this.proName = this.row.proname;
      this.proShortName = this.row.proshortname;
      this.proCode = this.row.procode;
      this.stage = this.row.prostage;
      console.log("人员信息", this.row);
      this.isDrawer = true;
      this.proCity.push(
        this.row.procity.split("-")[0],
        this.row.procity.split("-")[1]
      );
    },
  },
};
</script>

<style lang="scss" scoped>
@media screen and (max-width: 768px) {
  .update-main-box {
    .drawer-title {
      font-size: 16px;
      display: flex;
      justify-content: space-between;
      padding: 5px 5px;
      padding-right: 15px;
      margin-top: 5px;
      margin-left: 5px;
      > div {
        font-weight: bold;
      }
      .icon-guanbi:hover {
        cursor: pointer;
      }
    }
    .head-box {
      border-bottom: 1px solid #dddcdc;
      height: 30px;
      line-height: 30px;
      text-align: start;
      font-size: 13px;
      font-weight: bold;
      margin-top: 10px;
      margin-bottom: 10px;
      padding-left: 20px;
      display: flex;
      align-items: center;

      .identifier-box {
        height: 10px;
        width: 5px;
        margin-right: 6px;
        background: #11a70c;
      }
    }

    .info-box {
      /* border: 1px solid red; */
      width: 100%;
      padding-left: 8%;
      display: flex;

      .left-box {
        width: 100px;
        text-align: end;
      }

      .right-box {
        width: 60%;
      }

      .left-box,
      .right-box {
        /* border: 1px solid blue; */

        > div {
          height: 30px;
          width: 100%;
          line-height: 30px;
          font-size: 12px;
          margin: 5px 0;

          > input {
            padding-left: 15px;
            width: 92%;
            height: 20px;
            border: 1px solid #c8ccce;
            border-radius: 4px;
          }

          .el-select {
            width: 100%;
          }

          .el-cascader {
            width: 100%;
          }
        }
      }
    }

    .personnel-box {
      /* border: 1px solid red; */
      width: 100%;
      padding-left: 8%;
      display: flex;

      .left-box {
        width: 100px;
      }

      .right-box {
        width: 60%;
      }

      .left-box,
      .right-box {
        /* border: 1px solid blue; */

        > div {
          text-align: end;
          height: 30px;
          width: 100%;
          line-height: 30px;
          font-size: 13px;
          margin: 5px 0;

          > input {
            width: 96%;
            height: 20px;
          }

          .el-select {
            width: 100%;
          }
        }
      }
    }

    .contract-box {
      /* border: 1px solid red; */
      width: 100%;
      padding-left: 8%;
      display: flex;

      .left-box {
        width: 100px;
      }

      .right-box {
        width: 60%;
      }

      .left-box,
      .right-box {
        /* border: 1px solid blue; */

        > div {
          height: 30px;
          width: 100%;
          line-height: 30px;
          font-size: 13px;
          margin: 5px 0;
          display: flex;
          justify-content: end;

          > input {
            padding-left: 15px;
            width: 35%;
            height: 27px;
            border: 1px solid #c8ccce;
            border-radius: 4px;
            margin-right: 5px;
          }

          .el-select {
            width: 65%;
          }

          .el-date-editor {
            width: 65%;
          }
        }
      }
    }

    .btn-box {
      /* border: 1px solid #c40f0f; */
      width: 332px;
      margin: 10px 0;
      display: flex;
      justify-content: end;

      > div {
        text-align: center;
        height: 32px;
        width: 60px;
        font-size: 12px;
        margin-left: 10px;
        line-height: 32px;
        color: #fff;
        background: #85ce61;
        border-radius: 5px;
      }

      > div:hover {
        cursor: pointer;
        background: rgba($color: #85ce61, $alpha: 0.8);
      }

      .sub-btn {
        background: #67c23a;
        color: #fff;
      }

      .sub-btn:hover {
        background: #85ce61;
        border-color: #85ce61;
        color: #fff;
        cursor: pointer;
      }

      .remove-btn {
        background: rgba($color: #000000, $alpha: 0);
        color: #000;
        border: 1px solid #dcdfe6;
      }

      .remove-btn:hover {
        color: #409eff;
        border-color: #c6e2ff;
        background-color: #ecf5ff;
        cursor: pointer;
      }
    }
  }
}
</style>